<template>
    <div class="swiper">
    
      <swiper :options="swiperOption">

        <swiper-slide v-for="item of swiperList" :key="item.id">

          <a :href="item.url" target="_blank">
            <img class="swiper-img" :src="item.imgUrl">
          </a>

        </swiper-slide>

      <!--以下看需要添加-->
      <!-- <div class="swiper-scrollbar"></div> //滚动条 -->
      <!-- 左右箭头点击问题 -->
      <!-- <div class="swiper-button-prev" slot="button-prev"></div>  -->
      <!-- <div class="swiper-button-next" slot="button-next"></div>  -->

      <div class="swiper-pagination" slot="pagination"></div> 
      <!-- 标页码 -->
     </swiper>

    </div>
</template>

<script>
export default {
  name: 'softwareSwiper',
   data() {
    return {
      swiperOption: {
        //组件不会通过NextTick来实例化swiper，即第一时间获取到swiper对象
        // notNextTick: true,
        //通过插槽slot使用分页器
        pagination: '.swiper-pagination',
        paginationClickable: true,
        //实现轮播图循环
        loop: true,
        // 实现轮播图自动滚动
        autoplay:true,
        //设置滚动速度
        speed:5000,
        // grabCursor:true,
        // 手型与paginationClickable: true不兼容,
        
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        
        
      },

      swiperList: [{
            id: '1',
            url: "https://www.csdn.net/",
            imgUrl: 'https://pic.baike.soso.com/ugc/baikepic2/0/ori-20190526213105-1868371974_png_1084_634_758199.jpg/800',
          },{
            id: '2',
            url: "https://www.w3cschool.cn/",
            imgUrl: 'http://www.lgstatic.com/thumbnail_600x360/i/image/M00/4F/0C/CgqKkVetldOAUFqlAACpVy0IF2M586.jpg',
          },{
            id: '3',
            url: "https://github.com/",
            imgUrl: 'https://i03piccdn.sogoucdn.com/663017ee9aba164b',
          },{
            id: '4',
            url: "https://www.iconfont.cn/",
            imgUrl: 'http://www.xuejianzhan.com/wp-content/uploads/2016/11/2016-11-16_152040.png',
          },{
            id: '5',
            url: "https://element.eleme.cn/#/zh-CN/component/checkbox",
            imgUrl: 'https://i01piccdn.sogoucdn.com/58756b02be3dd6cb',
          }],
          
        }
      },
}
</script>

<style lang="stylus" scoped>
.swiper >>> .swiper-pagination-bullet-active
  background-color skyblue
.swiper
  width 100%
  overflow hidden
  position position
  margin-top 5rem
  z-index 1
  background-color #eee
  // background-color skyblue
  .swiper-img
    width 100%
    height 15rem
  .swiper-button-prev
    width 4%
    height 2rem
    text-align center
  .swiper-button-next
    width 4%
    height 2rem
    text-align center
</style>